<script setup lang="ts">
import {
  FireOutlined,
  ProfileOutlined,
  RocketOutlined,
  ShopOutlined,
  ShoppingCartOutlined,
  UserOutlined
} from "@ant-design/icons-vue";

// 超级优化主窗口
import {close} from "fs-extra";
import AccurateCrowdPromotion from "~/contentScripts/views/wxt/SuperOptimization/AccurateCrowdPromotion.vue";
import ActivityScene from "~/contentScripts/views/wxt/SuperOptimization/ActivityScene.vue";
import ConsumerOperation from "~/contentScripts/views/wxt/SuperOptimization/ConsumerOperation.vue";
import ContentMarketing from "~/contentScripts/views/wxt/SuperOptimization/ContentMarketing.vue";
import GoodsOperation from "~/contentScripts/views/wxt/SuperOptimization/GoodsOperation.vue";
import KeywordPromotion from "~/contentScripts/views/wxt/SuperOptimization/KeywordPromotion.vue";
import ShopOperation from "~/contentScripts/views/wxt/SuperOptimization/ShopOperation.vue";
import WxtModal from "~/contentScripts/views/wxt/wxt-modal.vue";

const emit = defineEmits([
  "update:visible",
  "close",
]);
const props = defineProps(
  {
    visible: {
      type: Boolean,
      default: false,
    },
    active: {
      type: String,
      default: 'keywordPromotion',
    },
    type: {
      type: String,
      default: 'plan',
    },
  },
);
const tabs = [
  {
    key: 'keywordPromotion',
    title: '关键词推广',
    icon: RocketOutlined,
    component: KeywordPromotion,
  },
  {
    key: 'accurateCrowdPromotion',
    title: '精准人群推广',
    icon: UserOutlined,
    component: AccurateCrowdPromotion,
  },
  {
    key: 'consumerOperation',
    title: '消费者运营',
    icon: ShoppingCartOutlined,
    component: ConsumerOperation,
  },
  {
    key: 'goodsOperation',
    title: '货品运营',
    icon: ShopOutlined,
    component: GoodsOperation,
  },
  // {
  //   title: '活动场景',
  //   icon: FireOutlined,
  //   component: () => ActivityScene,
  // },
  // {
  //   title: '内容营销',
  //   icon: ProfileOutlined,
  //   component: () => ContentMarketing,
  // },
  // {
  //   title: '店铺运营',
  //   icon: ShopOutlined,
  //   component: ShopOperation,
  // }
];
const activeKey = ref(props.active);
const close = () => {
  emit("update:visible", false);
  emit("close");
};
</script>

<template>
  <wxt-modal title="超级优化" :visible="visible" width="100vw" style="top: 10px;" @close="close" @cancel="close">
<!--    <template #titleRight>-->
<!--      <a-button type="link" @click="close">关闭</a-button>-->
<!--    </template>-->
    <template #titleRight>
      <a-space style="padding-left: 10px;">
        {{ tabs.find(item=>item.key===activeKey).title }}
      </a-space>
    </template>
    <a-tabs size="small" v-model:activeKey="activeKey" style="height: calc(100vh - 100px)" :destroyInactiveTabPane="true">
      <a-tab-pane v-for="(tab,index) in tabs" :key="tab.key" :tab="tab.title" style="height: 100%;">
        <template #tab>
          <span>
            <component :is="tab.icon"/>
            {{ tab.title }}
          </span>
        </template>
        <!--        <keep-alive>-->
        <component :is="tab.component" :active="type" style="height: 100%;"/>
        <!--        </keep-alive>-->
      </a-tab-pane>
    </a-tabs>
  </wxt-modal>
</template>

<style scoped>

</style>
